



        main{
            padding-bottom: 195px;
        }
        
        main .avatars{
            position: relative;
            z-index: 2;
            text-align: center;
            margin-top: 48px;
            margin-bottom: 60px;
        }
        main .avatars::before{
            content: '';
            padding-top: 48px;
            z-index: -1;
            top: -48px;
            height: 50%;
            background: #fff;
        }
        main .avatars::after{
            content: '';
            z-index: -1;
            position: absolute;
            width: calc(100% + 72px);
            left: 50%;
            transform: translateX(-50%);
            top: 50%;
            height: calc(50% + 60px);
            background: url(../img/join/avatarsShadow.png) no-repeat top center;
            background-size: contain;
        }

        
        main .recruit>p,
        main .recruit .content .ttl{
            font-size: 24px;
            font-weight: bold;
        }
        main .recruit>p{
            text-align: center;
            color: #9dbc0c;
            margin-bottom: 50px;
        }
        main .recruit .content{
            background: #fff;
            box-shadow: 0px 6px 15px 10px rgba(0,0,0,.2);
            border-left: 6px solid #62afd7;
            padding: 35px;
            margin-top: 40px;
        }
        main .recruit .content:first-child{
            margin-top: 0px;
        }
        main .recruit .content .flip{
            float: right;
            width: 30px;
            height: 30px;
            border: 1px solid #62afd7;
            position: relative;
            margin-left: 30px;
        }
        main .recruit .content .flip span{
            animation:rotate .5s ease forwards;
        }
        main .recruit .content .flip span:hover{
            animation-name: myRotate;
        }
        @keyframes rotate{
            form{
                transform: rotate(180deg);
            }to{
                transform:rotate(180deg);
            }
        }
        @keyframes myRotate{
            form{
                transform: rotate(0deg);
            }to{
                transform:rotate(180deg);
            }
        }
        main .recruit .content .flip span::before,
        main .recruit .content .flip span::after{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            background: #62afd7;
            transform: translate(-50%,-50%);
            width: 20px;
            height: 3px;
        }
        main .recruit .content .flip span::after{
            transition: transform .5s;
            transform: translate(-50%,-50%) rotate(90deg);
        }
        main .recruit .content .flip.clicked span::after{
            transform: translate(-50%,-50%) rotate(90deg) scaleX(0);
        }
        main .recruit .content .ttl{
            color: #62afd7;
        }
        main .recruit .content .des{
            font-size: 18px;
            line-height: 1.2;
            color: #7f7f7f;
            margin-top: 20px;
            margin-bottom: 25px;
        }
        main .recruit .content .apply{
            width: 170px;
            line-height: 50px;
            font-weight: bold;
            color: #fff;
            font-size: 18px;
            text-align: center;
            position: relative;
            z-index: 2;
        }
        main .recruit .content .apply::after{
            content: '';
            z-index: -1;
            background: #9dbc0c;
            transition: all .3s;
            border-radius: 50px;
        }
        main .recruit .content .apply:hover::after{
            transform: scale(.9);
        }
        main .recruit .content .command{
            transition: height .6s,margin .6s;
            background: #ececec;
            height: 0px;
            overflow: hidden;
        }
        main .recruit .content .command.show{
            margin-top: 32px;
        }
        main .recruit .content .command.complete{
            height: auto !important;
            overflow: visible;
        }
        main .recruit .content .command .inner{
            overflow: hidden;
            padding: 30px;
        }
        main .recruit .content .command .inner .box{
            width: calc(50% - 25px);
            font-size: 16px;
            float: left;
        }
        main .recruit .content .command .inner .box:nth-child(2n){
            margin-left: 50px;
        }
        main .recruit .content .command .inner .box:nth-child(n + 3){
            margin-top: 45px;
        }
        main .recruit .content .command .inner .box>p{
            font-weight: bold;
            color: #62afd7;
            margin-bottom: 20px;
            text-transform: capitalize;
        }
        main .recruit .content .command .inner .box .dtl li{
            margin-top: 25px;
        }
        main .recruit .content .command .inner .box .dtl li:first-child{
            margin-top: 0px;
        }
        main .recruit .content .command .inner .box .dtl p{
            position: relative;
            padding-left: 15px;
            color: #7f7f7f;
            line-height: 1.2;
        }
        
        main .recruit .content .command .inner .box .dtl p::before{
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #62afd7;
            top: calc(16px * 1.2 / 2 - 3px);
            left: 0px;
        }

        main .shadow{
            position: fixed;  
            z-index: 199;
            background: rgba(0,0,0,.4);
            opacity: 0 !important;
            pointer-events: none;
            transition-delay: all .5s;
        }
        main .shadow.active,
        main .infTable.active{
            opacity: 1 !important;
            pointer-events: all;
        }

        main .infTable{
            font-size: 17px;
            position: fixed;
            width: 700px;
            padding: 20px 30px;
            z-index: 200;
            opacity: 0 !important;
            pointer-events: none;
            transition: opacity .4s,transform .4s;
            transform: translate(-50%,-50%) scale(.6);
            background: #fff;
        }
        main .infTable.active{
            transition-delay: .2s;
            transform: translate(-50%,-50%) scale(1);
        }
        main .infTable .close{
            width: 30px;
            height: 30px;
            position: absolute;
            top: 20px;
            right: 20px;
        }
        main .infTable .close::before,
        main .infTable .close::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background: #000;
            top: 50%;
            transform: translateY(-50%) rotate(45deg);
            left: 0px;
        }
        main .infTable .close::after{
            transform: translateY(-50%) rotate(-45deg);
        }
        

        main .infTable .tp{
            text-align: center;
            margin-bottom: 10px;
        }
        main .infTable .tp .logo{
            width: 180px;
        }
        main .infTable .tp .ttl{
            font-size: 30px;
            flex: 1;
            padding-top: 10px;
        }
        main .infTable .formTp{
            overflow: hidden;
            padding: 0px 10px;
        }
        main .infTable .formTp>p{
            line-height: 36px;
            width: calc(100% - 150px);
            float: left;
        }
        main .infTable .formTp>p input{
            display: inline-block;
            height: 36px;
            line-height: 36px;
            width: calc(100% - 140px);
            vertical-align: top;
        }
        main .infTable .formTp .date{
            float: right;
            line-height: 36px;
        }
        main .infTable .formTp .date input{
            height: 36px;
            line-height: 36px;
            width: 90px;
            display: inline-block;
            vertical-align: top;
            margin-right: 8px;
        }
        
        main .infTable .table{
            border: 1px solid #2A6EB1;
            border-left-width: 2px;
            border-bottom-width: 2px;
        }
        main .infTable .table .blockName{
            width: 110px;
            padding: 0px 10px;
            text-align: center;
            line-height: 1.8;
            background: #72B0D9;
        }
        main .infTable .table .blockName p{
            width: 100%;
        }
        main .infTable .table .filling{
            flex: 1;
            overflow: hidden;
        }
        main .infTable .table li{
            overflow: hidden;
        }
        
        main .infTable .table .box li p{
            padding: 0px 10px;
            line-height: 36px;
            height: 36px;
            float: left;
            width: 25%;
        }
        main .infTable .table .box li p:nth-child(2){
            width: 50%;
        }
        main .infTable .table .box li p input{
            height: 100%;
            line-height: 36px;
        }
        main .infTable .table .box:first-child li{
            float: left;
        }
        main .infTable .table .box:first-child li,
        main .infTable .table .box:first-child li p{
            width: 50%;
        }
        main .infTable .table .box:nth-child(2) li:first-child,
        main .infTable .table .box:nth-child(3) li:first-child,
        main .infTable .table .box:first-child li p:first-child{
            background: rgba(113,176,215,.1);
        }

        
        main .infTable .table .box:last-child .blockName{
            width: calc(25% + 82.5px);
            height: 160px;
        }
        main .infTable .table textarea{
            height: 100%;
            line-height: 1.6;
            padding: 15px;
        }
        
        main .infTable .table .blockName,
        main .infTable .table li p,
        main .infTable .table .box:last-child .filling{
            border-top: 1px solid #2A6EB1;
            border-right: 1px solid #2A6EB1;
        }

        main .infTable .btnBox{
            text-align: right;
            margin-top: 20px;
        }
        main .infTable .btnBox .submit{
            display: inline-block;
            text-align: center;
            width: 120px;
            line-height: 40px;
            border-radius: 40px;
            color: #fff;
            font-weight: bold;
            font-size: 16px;
            position: relative;
            cursor: pointer;
            z-index: 2;
            text-transform: capitalize;
        }
        main .infTable .btnBox .submit::after{
            content: '';
            z-index: -1;
            background: #9dbc0c;
            transition: all .3s;
            border-radius: 45px;
        }
        main .infTable .btnBox .submit:hover::after{
            transform: scale(.9);
        }

        main .infTable .subTip{
            opacity: 0;
            width: 300px;
            line-height: 80px;
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            text-align: center;
            border-radius: 10px;
            background: #7f7f7f;
            z-index: 210;
            position: fixed;
            pointer-events: none;
        }
        main .infTable .subTip.active{
            animation: suc 2.5s ease;
        }
        @keyframes suc{
            0%{
                opacity: 0;
            }40%{
                opacity: 1;
            }60%{
                opacity: 1;
            }100%{
                opacity: 0;
            }
        }

        @media(max-width:1200px){
            main .infTable .table .box:last-child .blockName{
                height: 120px;
            }
        }

        @media(max-width:1024px){
            main{
                padding-bottom: 140px;
            }
            
            main .recruit>p, main .recruit .content .ttl{
                font-size: 20px;
            }
            main .recruit .content .des,
            main .recruit .content .apply{
                font-size: 16px;
            }
            main .recruit .content .apply{
                width: 150px;
                line-height: 40px;
            }

            main .infTable{
                font-size: 15px;
                width: 600px;
            }
            main .infTable .tp .ttl{
                font-size: 24px;
            }
            main .infTable .btnBox .submit{
                font-size: 14px;
                width: 100px;
                line-height: 32px;
            }
        }

        @media(max-width:767px){
            main{
                padding-bottom: 90px;
            }
            
            main .avatars{
                margin-bottom: 40px;
            }
            main .avatars::after{
                height: calc(50% + 20px);
            }

            main .recruit>p{
                margin-bottom: 30px;
            }
            main .recruit>p, main .recruit .content .ttl{
                font-size: 16px;
            }
            main .recruit .content{
                padding: 25px;
            }
            main .recruit .content .flip{
                width: 24px;
                height: 24px;
            }
            main .recruit .content .flip span::before,
            main .recruit .content .flip span::after{
                width: 16px;
                height: 2px;
            }
            main .recruit .content .des,
            main .recruit .content .apply{
                font-size: 14px;
            }
            main .recruit .content .apply{
                width: 120px;
                line-height: 36px;
            }
            main .recruit .content .command .inner{
                padding: 20px;
            }
            main .recruit .content .command .inner .box{
                width: 100%;
                float: initial;
                font-size: 14px;
            }
            main .recruit .content .command .inner .box:nth-child(2n){
                margin-top: 30px;
                margin-left: 0px;
            }
            main .recruit .content .command .inner .box:nth-child(n + 3){
                margin-top: 30px;
            }
            main .recruit .content .command .inner .box .dtl p{
                margin-top: 10px;
            }

            main .infTable{
                width: calc(100% - 30px);
                font-size: 13px;
                padding: 20px;
            }
            

            main .infTable .close{
                width: 20px;
                height: 20px;
                top: 10px;
                right: 10px;
            }
            main .infTable .tp .logo{
                width: 120px;
            }
            main .infTable .tp .ttl{
                font-size: 16px;
                padding-top: 20px;
            }
            main .infTable .formTp{
                padding: 0px;
            }
            main .infTable .formTp>*{
                width: 100% !important;
                float: initial !important;
            }
            main .infTable .formTp .date input{
                width: 32px;
                margin-right: 5px;
            }
            main .infTable .table .box{
                display: block;
            }
            main .infTable .form{
                margin: 0px -20px;
                padding: 0px 15px;
                height: 55vh;
                overflow-y: auto;
            }
            main .infTable .form::-webkit-scrollbar{
                width: 6px;
                height: 6px; 
            }
            main .infTable .form::-webkit-scrollbar-thumb{
                border-radius: 3px;
                background: rgba(0,0,0, .2);
            }
            main .infTable .form::-webkit-scrollbar-track{
                background: rgba(0,0,0,0);
            }
            main .infTable .table .blockName{
                width: 80px;
                padding: 0px 5px;
                height: auto !important;
                line-height: 36px !important;
                width: 100% !important;
            }
            main .infTable .table .box:last-child .blockName{
                width: calc(25% + 60px);
            }
            main .infTable .table .box:first-child li{
                width: 100%;
            }
            main .infTable .table .box:first-child li p{
                width: 75%;
            }
            main .infTable .table .box:first-child li p:first-child{
                width: 25%;
            }
            main .infTable .table .box:nth-child(2) li:first-child,
            main .infTable .table .box:nth-child(3) li:first-child{
                display:box;
                display: -webkit-box; 
                display: -moz-box;
                display: -webkit-flex; 
                display: -moz-flex; 
                display: -ms-flexbox;
                display: flex;
            }
            main .infTable .table .box:nth-child(2) li:first-child p,
            main .infTable .table .box:nth-child(3) li:first-child p{
                line-height: 1.6;
                min-height: 36px;
                height: initial;
                padding-top: 5px;
                padding-bottom: 5px;
            }
            main .infTable .table .box li p{
                width: 35% !important;
            }
            main .infTable .table .box li p:last-child{
                width: 30% !important;
            }
            main .infTable .table .box:first-child li p{
                width: 65% !important;
            }
            main .infTable .table .box:first-child li p:first-child{
                width: 35% !important;
            }
        }